Beskrivelse

Detaljsiden for en handlet liste, laget etter Figma-designet «Previous list» (FIG. 11 – Handlet liste). Når brukeren åpner en tidligere handleliste, ser hun hva som ble handlet, og kan bruke listen på nytt.

Bruker samme rute som den aktive listen (/lists/:id). Detaljsiden viser handlet-visningen når listen har status: "COMPLETED".

Relaterte issues

Closes #59
(Må lukkes manuelt, siden PR-en merges til dev.)

Bygger på #58. Henger sammen med #76 (oversikt over tidligere handlelister).

Endringer gjort

• Ny komponent pages/shoppingLists/CompletedListView.tsx med CSS
• ShoppingListDetailPage viser CompletedListView når listen er handlet
• Notatblokk med «Handlet · liste nr.», dato, listenavn, antall varer og et skjevt «HANDLET»-stempel
• Varene vises med hake, antall (f.eks. ×2) og pris, fordelt på to kolonner. De kan ikke redigeres
• «Om lista» med handlet-dato, antall varer, butikk og totalsum
• Knappene «Bruk på nytt», «Legg varer på aktiv lapp» og «Slett lista»
• Typene har fått de valgfrie feltene completedAt? og store?
• Mock-dataene har fått en handlet liste, «Ukeshandel» (id 11), med de 14 varene fra Figma
• Gjenbruker notatblokken og oppsummeringsboksen fra den aktive listen, og variabler fra theme.css, så siden følger lys og mørk modus
• Responsiv: én kolonne med varer på mobil, og boksen legger seg under lappen

Hva slags type fiks inneholder denne PR

• Bug fix
• Ny funksjonalitet
• Refactor
• Dokumentasjon
• Testing

Sjekkliste

• Testet lokalt
• Dokumentert endringer
• Sjekket for feilmeldinger

Testet /lists/11 i lys og mørk modus og på smal skjerm. /lists/1 viser fortsatt den aktive listen. TypeScript-sjekken går uten feil.

Skjermbilder

Gjenstår

• Knappene «Bruk på nytt», «Legg varer på aktiv lapp» og «Slett lista» har foreløpig ingen funksjon. De kobles til backend senere (feat: Integrere handlelisteoversikt med GraphQL #63).
• Historikken (70 feat implementere oversikt over tidligere handlelister #76) bør hente listene fra shoppingListMockData.ts, så radene åpner denne siden.
• Refaktorering: Bytte inn felles komponenter (Checkbox, Button, ShoppingListRow m.fl.) i en egen PR, etter Lindes forslag på feat: Side for aktiv handleliste #58.